<template>
    <!--  -->
    <div class="banner">
        <img src="../assets/images/GIF.gif" alt="">
        <div class="banner-text">
            <h2 class="h2"><span>万物通 供应链</span></h2>
            <p>二类电商 优质供应商</p>
            <div class="banner-btn">
                <div class="el-button cursor" @click="goodsLogin">选品中心</div>
                <div class="el-button cursor"> <a href="#daping" style="color: #fff;">数字大屏</a></div>
            </div>
        </div>
    </div>
    <!--  -->
    <div class="and_my content_web">
        <h3 class="andTile">关于<span class="and">万物通</span></h3>
        <div class="img_box">
            <img src="../assets/images/andMy-one1.png" alt="">
        </div>
        <div class="ptit">
            <p><span>万物通，通万物！</span>二类电商优质供应商！</p>
            <!-- <b>Second class e-commerce high-quality supplier</b> -->
        </div>
        <div class="andText">
            <p>
                <b>万物通理念:</b>
                安全，高效，创新，共赢
            </p>
            <p>
                <b>万物通愿景:</b>
                数字融合！共创新质生产力
            </p>
            <p>
                <b>万物通定位:</b>
                聚焦于二类电商平台，提供货盘稳定,品类齐全,数实融合的供应链解决方案
            </p>
        </div>
        <div class="and_btn">
            <span><b>数实融合供应链</b></span>
        </div>
    </div>
    <div class="glide"></div>
    <!--  -->
    <div class="skill content_web">
        <h3 class="andTile">为什么选择<span class="and">万物通</span></h3>
        <div class="skill-text">
            <div class="item-text">
                <div class="text-h">
                    <el-statistic class="top" :value="outputValue1" />
                    <span class="topr">天客服</span>
                </div>
                <span class="text-t">安全高效配合</span>
            </div>
            <div class="item-text">
                <div class="text-h">
                    <el-statistic class="top" :value="outputValue2" />
                    <span class="topr"></span>
                </div>
                <span class="text-t">一级品牌授权</span>
            </div>
            <div class="item-text">
                <div class="text-h">
                    <el-statistic class="top" :value="outputValue3" />
                    <span class="topr"></span>
                </div>
                <span class="text-t">源头工厂直供</span>
            </div>
            <div class="item-text">
                <div class="text-h">
                    <el-statistic class="top" :value="outputValue4" />
                    <span class="topr"></span>
                </div>
                <span class="text-t">真实有效SKU</span>
            </div>
            <div class="item-text">
                <div class="text-h">
                    <el-statistic class="top" :value="outputValue5" />
                    <span class="topr"></span>
                </div>
                <span class="text-t">API免费接入</span>
            </div>
        </div>
        <div class="skill-box">
            <div class="item">
                <img class="image" src="../assets/images/home-whxz1.png" alt="">
                <span class="item-t">安全可靠</span>
                <p class="content"> 正品保障 </p>
                <p class="content"> 品类齐全 </p>
            </div>
            <div class="item">
                <img class="image" src="../assets/images/home-whxz2.png" alt="">
                <span class="item-t">高效精准</span>
                <p class="content"> 发货及时 </p>
                <p class="content"> 用户精准</p>
            </div>
            <div class="item">
                <img class="image" src="../assets/images/home-whxz3.png" alt="">
                <span class="item-t">货盘稳定</span>
                <p class="content"> 省时省力</p>
            </div>
        </div>
    </div>
    <!--  -->
    <div class="publicity">
        <el-tabs v-model="activeName" class="demo-tabs " >
            <!-- @tab-click="handleClick" -->
            <el-tab-pane v-for="item in publicityData" :key="item.text" :label="item.text" :name="item.text">
                <div class="tabs-content">
                    <div class="tab-text anima-text" v-show="activeName == '供应链'">
                        <div class="top">
                            <img src="../assets/images/home-gyl2.png" alt="">
                            <div class="name">
                                <b>供应链</b>
                                <span>源头供应商 源头品牌商</span>
                            </div>
                        </div>
                        <div class="content">
                            <p>真实、有效供应链，打通上下游，提高运营效率。</p>
                            <p>API对接，实现数据智能化、透明化和自动化。</p>
                            <p>实时数据采集，提高供应链的敏捷性和高效性。</p>
                        </div>
                        <div class="tab-btn">
                            <div class="div cursor" @click="goodsLogin">选品中心</div>
                            <!-- <a href="weixin://dl/business/?appid=wxb2e98f2e34961bde&path=pages/homeView/index">商城登录</a> -->
                            <div class="div cursor" @click="fnRouteL">
                                <a href="weixin://dl/business/?appid=wxb2e98f2e34961bde&path=pages/homeView/index" style="color: #fff;">商城登录</a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-text anima-text" v-show="activeName == '数实一体化'">
                        <div class="top">
                            <img src="../assets/images/home-ssyt2.png" alt="">
                            <div class="name">
                                <b>数实一体化</b>
                                <span>API技术支撑 数字化运营</span>
                            </div>
                        </div>
                        <div class="content">
                            <p>发展数智融合供应链</p>
                            <p>自有技术开发团队</p>
                            <p>共创新质生产力</p>
                        </div>
                        <div class="tab-btn">
                            <div class="div cursor" @click="fnRouteL">我要合作</div>
                            
                            <div class="div cursor">
                                <a href="#daping" style="color: #fff;">数字大屏</a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-text anima-text" v-show="activeName == '营销体系'">
                        <div class="top">
                            <img src="../assets/images/home-yxtx2.png" alt="">
                            <div class="name">
                                <b>营销体系</b>
                                <span>一件代发、项目集采、开发定制、批量集采</span>
                            </div>
                        </div>
                        <div class="content">
                            <p>福利礼品</p>
                            <p>APP/小程序私域商城</p>
                            <p>跨境电商/直播电商</p>
                            <p>线下实采</p>
                        </div>
                        <div class="tab-btn">
                            <div class="div cursor" @click="goodsLogin">选品中心</div>
                            <div class="div cursor" >
                                <a href="#daping" style="color: #fff;">数字大屏</a>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <!--  -->
    <div class="ditch content_web">
        <h3 class="andTile">销售<span class="and">渠道</span></h3>
        <div class="image-box">
            <div class="images" ref="slide" @touchstart="webstart($event)" @touchmove="move($event)"
                @touchend="webend($event)">
                <img src="../assets/images/home-ditch1.png" alt="" :style="{ transform: `translateX(${imgLate}vw)` }">
                <img src="../assets/images/home-ditch2.png" alt="" :style="{ transform: `translateX(${imgLate}vw)` }">
                <img src="../assets/images/home-ditch3.png" alt="" :style="{ transform: `translateX(${imgLate}vw)` }">
                <img src="../assets/images/home-ditch4.png" alt="" :style="{ transform: `translateX(${imgLate}vw)` }">
                <img src="../assets/images/home-ditch5.png" alt="" :style="{ transform: `translateX(${imgLate}vw)` }">
                <img src="../assets/images/home-ditch6.png" alt="" :style="{ transform: `translateX(${imgLate}vw)` }">
            </div>
        </div>
        <div class="dotted_box">
            <ul class="item_box">
                <li class="item" v-for="item in 6" :key="item"
                    :style="{ backgroundColor: item == imgNum + 1 ? '#049de0' : '#a9a9a9' }"></li>
            </ul>
        </div>
    </div>
    <div class="glide"></div>
    <!-- 整合 -->
    <div class="integrate ">
        <h3 class="andTile center-text">供应链资源<span class="and">整合</span></h3>
        <div class="items ">
            <div class="item">
                <div class="left">
                    01.
                </div>
                <div class="right">
                    <h4 class="tit">源头供应链</h4>
                    <div class="tet_box">
                        <p class="tet">源头品牌工厂 品质保障，利润保障 </p>
                        <p class="tet">供应链协同 安全、可靠、高效 </p>
                        <p class="tet">供货稳定 有效寻源，减少供应风险 </p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    02.
                </div>
                <div class="right">
                    <h4 class="tit">供销一体平台</h4>
                    <div class="tet_box">
                        <p class="tet">供货稳定 有效寻源，减少供应风险</p>
                        <p class="tet">供应链效能 无缝衔接供、采、销，提高运营效率</p>
                        <p class="tet">快速反应 商品信息共享， 统一调度，及时响应需求</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    03.
                </div>
                <div class="right">
                    <h4 class="tit">定制供应链</h4>
                    <div class="tet_box">
                        <p class="tet">需求定制 个性化、多元化市场采购需求</p>
                        <p class="tet">产品定制 快速匹配产品，优化采购成本，提升采购效率</p>
                        <p class="tet">服务定制 采购、物流各环节，按客户需求配合调整、优化</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    04.
                </div>
                <div class="right">
                    <h4 class="tit">供应链智慧管理</h4>
                    <div class="tet_box">
                        <p class="tet">实时数据 实时数据采集、智能分析和优化决策</p>
                        <p class="tet">技术支持 自有SCM系统，实现全程智能化、透明化</p>
                        <p class="tet">数实协同 供采销一体化协同，数字化运营+实体供应链</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="glide"></div>
    <!-- 大屏 -->
    <div class="daping">
        <h3 class="andTile" id="daping">供应链<span class="and">合作</span></h3>
        <num_web></num_web>
    </div>
    <!-- 合作 -->
    <div class="teamwork ">
        <h3 class="andTile">供应链<span class="and">合作</span></h3>
        <div class="img-box">
            <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
                <div class="botm">
                    <h5>
                        <b>供应商合作要求</b>
                    </h5>
                    <p>
                        源头工厂:自有品牌，产品线成熟，有天猫/京东等线上商城，支持比价，产品可提供一件代发。能够满足线下实采、产品定制、招投标服务能力。
                    </p>
                    <p>
                        品牌方:产品线成熟，可开具一级/二级品牌授权，有天猫/京东等线上商城，支持比价，产品可提供一件代发。
                    </p>
                    <span class="cursor" @click="goodsLogin">选品中心</span>
                </div>
            </div>
            <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
                <div class="botm">
                    <h5>
                        <b>分销商合作要求</b>
                    </h5>
                    <p>
                        1、有分销能力，实体商超或贸易商均可。
                    </p>
                    <p> 2、自有销售渠道，线上线下不限，品类不限!</p>
                    <p> 各业态合作伙伴满足资质要求共享万物通数字供应链，实现一件代发，商品配送，库存共享渠道共建等服务。</p>
                    <span class="cursor" @click="fnRouteL">我要入驻</span>
                </div>
            </div>
            <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
                <div class="botm">
                    <h5>
                        <b>平台商合作要求</b>
                    </h5>
                    <p>
                        1.银行、航空、政企等福利积分商城。
                    </p>
                    <p>
                        2.具有销售能力的企业/个人私域商城
                    </p>
                    <p>
                        3.具备良好的商誉及信用值
                    </p>
                    <span class="cursor" @click="goodsLogin">选品中心</span>
                </div>
            </div>
            <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
                <div class="botm">
                    <h5>
                        <b>项目合伙人合作要求</b>
                    </h5>
                    <p>
                        1.具有良好商务能力和分销网络销售渠道，线上线下不限，品类不限!
                    </p>
                    <p>
                        2.具备合作双赢多赢的团队意识
                    </p>
                    <p>
                        3.具备挑战高薪的能力和信心
                    </p>
                    <span class="cursor" @click="goodsLogin">选品中心</span>
                </div>
            </div>
            <div class="image" :style="{ transform: `translateX(${teamImg}vw)` }">
                <div class="botm">
                    <h5>
                        <b>其它伙伴</b>
                    </h5>
                    <p>
                        欢迎以下人员加入
                    </p>
                    <p>
                        1.拥有供应链开发管理经验者
                    </p>
                    <p>
                        2.拥有业务开拓能力者
                    </p>
                    <p>
                        3.拥有企业内部管理经验者
                    </p>
                    <p>
                        4.拥有电商运营经验者
                    </p>
                    <span class="cursor" @click="goodsLogin">选品中心</span>
                </div>
            </div>
        </div>
        <div class="dotted_box">
            <ul class="item_box">
                <li class="item" v-for="item in 5" :key="item"
                    :style="{ backgroundColor: item == teamImgNum + 1 ? '#049de0' : '#a9a9a9' }"></li>
            </ul>
        </div>
    </div>
    <div class="glide"></div>
    <!--  -->
    <div class="brand-box content_web">
        <h3 class="andTile ">部分<span class="and">合作品牌</span></h3>
        <div class="image-bar">
            <img src="../assets/images/brand-img.png" alt="">
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { useTransition } from '@vueuse/core'
const skillNum1 = ref(0)
const skillNum2 = ref(0)
const skillNum3 = ref(0)
const skillNum4 = ref(0)
const skillNum5 = ref(0)
const outputValue1 = useTransition(skillNum1, {
    duration: 1500,
})
const outputValue2 = useTransition(skillNum2, {
    duration: 1500,
})
const outputValue3 = useTransition(skillNum3, {
    duration: 1500,
})
const outputValue4 = useTransition(skillNum4, {
    duration: 1500,
})
const outputValue5 = useTransition(skillNum5, {
    duration: 1500,
})
const scrollPosition = ref(0);
// 监听滚动事件  
const handleScroll = () => {
    scrollPosition.value = window.scrollY || window.pageYOffset;
    const scroll = scrollPosition.value * 100
    const num = scroll / window.innerWidth
    if (num > 39.5253) {
        skillNum1.value = 365
        skillNum2.value = 3000
        skillNum3.value = 1500
        skillNum4.value = 30000
        skillNum5.value = 15000
    }
};
// 组件挂载后添加监听器  
onMounted(() => {
    autoImage2()
    autoImage()
    window.addEventListener('scroll', handleScroll);
});
// 
// 技术服务
const publicityData = ref([
    {
        text: '供应链', img: '', content: {
            title: '直接对接品牌源头工厂',
            content: `省去中间环节   通供应链上下游,形成无缝衔接的流程，提高整体运营效率。自有的技术开发，实现供应链全程的智能化、透明化和自动化。`,
            bottom: '通过实时数据采集、智能分析和优化决策，提高供应链的敏捷性、和可持续性。'
        }
    },
    {
        text: '营销体系', img: '', content: {
            title: '自有的技术开发，实现供应链全程的智能化',
            content: `覆盖福利礼品集采 、 APP小程序的私域自建商城、跨境渠道、直播电商及线下实采的五大场景需求。`,
            bottom: '满足一件代发、。项目集采、开发定制、批量采购四大营销类型。'
        }
    },
    {
        text: '数实一体化', img: '', content: {
            title: '运用物联网、大数据和人工智能技术',
            content: `实现供应链全流程的智能优化，结合线上流量与线下体验，开展新零售模式，提供个性化、精准化的营销和服务体验。`,
            bottom: '以数智化方式 全共创新质生产力新赋能实体经济 共创新质生产力'
        }
    }
])
// 移动端滑动、
const imgLate = ref(0)
const imgNum = ref(0)
function imglateFn(num) {
    if (num == 0 && imgNum.value > 0) {
        imgNum.value--
        imgLate.value += 18
    } else if (num == 1 && imgNum.value < 3) {
        imgLate.value -= 18
        imgNum.value++
    }
}
const flag = ref(false)
const startX = ref(0)
const endX = ref(0)
// const msg = ref('')
const slide = ref(null)
// const transY = ref(0)
const webstart = (e) => {  //记录开始滑动屏幕的X轴的位置
    flag.value = true;
    startX.value = e.touches[0].clientX;
    endX.value = slide.value.offsetLeft;
};
function move(e) {
};
const webend = (e) => {
    if (flag.value) {
        flag.value = false;
        var moveX = e.changedTouches[0].clientX - startX.value;  //计算滑动的距离
        if (moveX < 0 && imgNum.value < 5) {    //向左滑动
            imgNum.value++
            imgLate.value = imgLate.value - 70
        } else if (moveX > 0 && imgNum.value > 0) {
            imgNum.value--
            imgLate.value = imgLate.value + 70
            // autoImage()
        }
    }
}
const teamImg = ref(0)
const autoImage = () => {
    if (window.innerWidth < 1000) {
        setInterval(() => {
            if (imgNum.value > 4) {    //向左滑动
                imgNum.value = 0
                imgLate.value = 0
            } else {
                imgNum.value++
                imgLate.value = imgLate.value - 70
            }
        }, 3500)
    }
}
const teamImgNum = ref(0)
const autoImage2 = () => {
    if (window.innerWidth < 1000) {
        setInterval(() => {
            if (teamImgNum.value > 3) {    //向左滑动
                teamImgNum.value = 0
                teamImg.value = 0
            } else {
                teamImgNum.value++
                teamImg.value = teamImg.value - 89
            }
        }, 3500)
    }
}
const activeName = ref('供应链')
const goodsLogin = () => {
   window.open("https://xp.wwtscm.com/#/")
}
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

@keyframes text {
    0% {
        transform: translateX(110%);
    }

    100% {
        transform: translateX(0);
    }
}

.anima-text {
    animation: text 1s 1;
}

.andTile {
    font-size: $banner-title-size2;
    color: #3e3f3f;
    text-align: center;
    background-image: url('../assets/images/and-wwt.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-top: 1.2vw;
    font-weight: 700;
    margin: 6vw 0 4vw 0;

    .and {
        color: $firm-color;
        font-weight: 700;
    }
}

.content_web {
    width: 85%;
    margin: 0 auto;
}

.banner {
    position: relative;
    width: 100vw;
    height: 60vw;

    img {
        position: absolute;
        right: 0;
        height: 60vw;
    }

    .banner-text {
        width: 40%;
        height: 100%;
        margin-left: 30%;
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2;
        color: #fff;

        .h2 {
            display: flex;
            justify-content: center;
            letter-spacing: 0.3vw;

            span {
                color: #fff;
                background-image: url('../assets/images/home-tbgc.png');
                background-repeat: no-repeat;
                background-position: left bottom;
                background-size: 100% 0.2vw;
                font-weight: 700;
                font-size: $banner-title-size;
                margin-bottom: 3vw;
            }
        }

        p {
            font-size: $content-title-size2;
            font-weight: 700;
            letter-spacing: 0.3vw;
        }

        .banner-btn {
            display: flex;
            margin-top: 4vw;

            .el-button {
                width: 18.7vw;
                height: 5.19vw;
                font-size: $content-title-size;
                border-radius: 2.7vw;
                line-height: 5.19vw;
                padding: 0;
                color: #fff;
                text-align: center;
                border: #fff 0.1vw solid;

                &:nth-child(1) {
                    background-color: rgba($color: $firm-color, $alpha: 0.8);
                }

                &:nth-child(2) {
                    background-color: rgba($color: $botton-bgc, $alpha: 0.8);
                    margin-left: 1vw;
                }
            }
        }
    }
}

// 
.glide {
    border-bottom: #f7f7f7 2.5vw solid;
}

.and_my {
    margin-top: 4vw;

    .andTile {
        background-image: url('../assets/images/and-wwt.png');
        margin: 6vw 0 4vw 0;
    }

    .img_box {
        width: 100%;
        height: 35vw;
        margin-bottom: 4vw;
        border-radius: 2.5vw;
        position: relative;
        overflow: hidden;

        img {
            width: 100%;
            position: absolute;
            top: -28vw;
        }

    }

    .ptit {
        width: 85%;
        margin: 4vw auto;
        font-size: $banner-title-size5;
        text-align: center;
        line-height: 1;

        p {
            &::before {
                display: inline-block;
                content: '';
                margin-right: 0.2vw;
                border-right: 1.5vw solid #666;
                border-top: solid 1.2vw transparent;
                border-bottom: solid 1.2vw transparent;
            }

            &::after {
                display: inline-block;
                content: '';
                margin-left: 0.2vw;
                border-left: 1.5vw solid #666;
                border-top: solid 1.2vw transparent;
                border-bottom: solid 1.2vw transparent;
            }
        }

        span {
            font-weight: 700;
            color: $firm-color;
        }

        b {
            font-size: $content-title-size2;
            color: #999;

        }

    }

    .andText {
        font-size: $content-title-size;
        color: #666;
        margin: 0 auto;
        margin-top: 1vw;
        width: 85%;
        background-color: rgba($color: $firm-color, $alpha: 0.05);
        padding: 2vw 6vw;
        border-radius: 1vw;

        p {
            margin: 2vw 0;

            b {
                color: #000;
                font-weight: 700;
            }
        }
    }

    .and_btn {
        width: 85%;
        margin: 3vw auto;
        display: flex;
        font-size: $banner-title-size5 ;
        justify-content: center;
        margin-bottom: 5vw;

        span {
            border-radius: 1vw;
            padding: 1.8vw;
            color: #000;
            background-color: #fff;
            box-shadow: $box-shadow-all;

            b {
                font-weight: 700;
                background-image: url('../assets/images/home-tbgc.png');
                background-size: 100% 0.6vw;
                background-repeat: no-repeat;
                background-position: left bottom;
            }
        }
    }
}

.skill {
    margin-top: 5vw;

    .skill-box {
        display: flex;
        margin-top: 3vw;

        .item {
            width: 25vw;
            height: 30vw;
            box-shadow: $box-shadow-all;
            background-image: url('../assets/images/home-whxz1bgc.png');
            background-size: 10vw;
            border-radius: 0.5vw;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            background-repeat: no-repeat;
            background-position: right bottom;
            transition: all 0.5s;

            &:hover {
                transform: scale(1.1);
            }

            .image {
                width: 10.17vw;
                height: 10.17vw;
                margin-top: 2vw;
            }

            .item-t {
                font-size: $content-title-size;
                margin: 1.5vw 0;
                font-weight: 700;
                background-image: url('../assets/images/home-tbgc.png');
                background-repeat: no-repeat;
                background-position: left bottom;
                background-size: 100% 1vw;
            }

            .content {
                font-size: $content-title-size2;
                text-align: center;
                color: #666;

                &::before {
                    display: inline-block;
                    width: 1.2vw;
                    height: 1.2vw;
                    border-radius: 50%;
                    background-color: #666;
                    content: '';
                }
            }

            &:nth-child(2) {
                margin: 0 3vw;
                padding: 0 2.0vw;
                background-image: url('../assets/images/home-whxz2bgc.png');
            }

            &:nth-child(3) {
                background-image: url('../assets/images/home-whxz3bgc.png');
            }
        }
    }

    .andTile {
        background-image: url('../assets/images/home-advantage.png');
    }

    .skill-text {
        margin: 3vw 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item-text {
            text-align: center;
            margin-bottom: 2vw;
            color: #707888;

            &:nth-child(1) {
                width: 50%;

                .topr {
                    &::after {
                        content: '' !important;
                    }
                }
            }

            &:nth-child(2) {
                width: 50%;
            }

            .text-h {
                position: relative;
                display: flex;
                align-items: end;
                justify-content: center;

                ::v-deep .el-statistic {
                    color: #666;

                    .el-statistic__content {
                        font-size: $banner-title-size2 !important;
                        color: $firm-color ;
                        font-weight: 600 !important;
                    }
                }

                .topr {
                    font-size: $content-title-size2;
                    color: $firm-color ;

                    &::after {
                        content: '+';
                        color: $firm-color;
                        font-size: $content-title-size;
                        font-weight: 700;
                        position: absolute;
                        bottom: 0.3vw;
                    }
                }
            }

            .text-t {
                font-size: $content-title-size2;
                color: #222;
            }
        }
    }
}

.publicity {
    background-color: #FAFCFF;
    margin-top: 6.98vw;
    margin-bottom: 3.98vw;
    padding: 2vw 0;

    .demo-tabs {
        width: $web-center;
        margin: 0 auto;
        position: relative;

        .tabs-content {
            display: flex;
            justify-content: space-between;
            padding: 1vw;

            .tab-text {
                position: static;
                width: 80vw;
                height: 44.7vw;
                border-radius: 3vw;
                padding: 1.5vw;
                box-shadow: $box-shadow-all;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                transition: all 2s;
                background-image: url('../assets/images/home-gyl3.png');
                background-repeat: no-repeat;
                background-position: right bottom;
                background-size: 50% 50%;

                &:nth-child(2) {
                    background-image: url('../assets/images/home-yxtx3.png');
                }

                &:nth-child(3) {
                    background-image: url('../assets/images/home-ssyt3.png');
                }

                .top {
                    display: flex;
                    color: #000;
                    border-bottom: 0.1vw solid #D9D9D9;
                    padding-bottom: 0.9vw;

                    img {
                        width: 10.2vw;
                        height: 10.2vw;
                        flex-shrink: 0;
                    }

                    .name {
                        display: flex;
                        flex-direction: column;
                        margin-left: 1vw;

                        b {
                            font-size: $banner-title-size3;
                            font-weight: 700;
                            background-image: url('../assets/images/home-tbgc.png');
                            background-repeat: no-repeat;
                            background-position: left bottom;
                            margin-bottom: 0.3vw;
                        }

                        span {
                            font-size: $content-title-size2;
                        }
                    }
                }

                .content {
                    margin-top: 0.5vw;
                    font-size: $content-title-size;
                    color: #666;
                    line-height: 1.7;

                    p {
                        display: flex;
                        align-items: center;

                        &::before {
                            content: '';
                            display: inline-block;
                            width: 1.6vw;
                            height: 1.6vw;
                            border-radius: 50%;
                            background-color: $firm-color;
                            margin-right: 0.5vw;
                        }
                    }
                }

                .tab-btn {
                    display: flex;
                    justify-content: space-between;
                    margin: 1.5vw 0;
                    padding: 0 1.5vw;

                    .div {
                        width: 20vw;
                        height: 5.8vw;
                        border-radius: 2.9vw;
                        background-color: #f4f4f4;
                        text-align: center;
                        line-height: 5.8vw;
                        color: #fff;
                        font-size: $content-title-size;
                        background-color: $botton-bgc;

                        &:nth-child(1) {
                            background-color: $firm-color;
                        }
                    }
                }
            }
        }

        ::v-deep .el-tabs__header {
            // border: none;
            margin-bottom: 3.28vw;

            .el-tabs__nav-wrap::after {
                height: 0;
            }

            .el-tabs__nav {
                width: 100%;
                display: flex;
                justify-content: space-evenly;

                .el-tabs__item {
                    font-size: $banner-title-size3;
                    height: 5.85vw;
                    padding: 0;
                }

                .is-active {
                    color: $firm-color;
                    position: relative;

                    &::after {
                        width: $web-center;
                        height: 8%;
                        content: '';
                        position: absolute;
                        left: 10%;
                        bottom: 0;
                        background-color: $firm-color ;
                    }
                }

                .el-tabs__active-bar {
                    height: 0;
                }
            }
        }
    }
}

// 圆点
.dotted_box {
    display: block;
    margin-bottom: 2vw;

    .item_box {
        display: flex;
        justify-content: center;

        .item {
            width: 1.5vw;
            height: 1.5vw;
            border-radius: 50%;
            margin: 0 1.5vw;
        }
    }
}

.ditch {
    margin-top: 3vw;
    margin-bottom: 3vw;

    .andTile {
        background-image: url('../assets/images/ditch-bgc.png');
    }

    .image-box {
        margin-top: 3vw;
        overflow: hidden;

        .images {
            overflow: hidden;
            display: flex;
            transform: translateX();
        }

        img {
            width: 70.8vw;
            height: 46vw;
            flex-shrink: 0;
        }
    }
}

// 资源整合
.integrate {
    background-image: url('../assets/images/home-gylzhbgc.png');
    // background-size: 100%;
    background-size: 390%;
    height: 130vw;

    .andTile {
        background-image: url('../assets/images/gylzh-tbgc.png');
        margin-bottom: 2.5vw;
        margin-top: 5vw;
    }

    .items {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        justify-content: space-evenly;

        .item {
            width: 80vw;
            height: 26.5vw;
            background-color: #fff;
            border-radius: 1vw;
            display: flex;
            padding: 2vw 3vw;
            position: relative;
            margin-bottom: 2vw;
            transition: 1s;

            &:nth-child(2) {
                transform: translateX(3vw);
            }

            &:nth-child(4) {
                transform: translateX(3vw);
            }

            &:nth-child(1) {
                transform: translateX(-3vw);
            }

            &:nth-child(3) {
                transform: translateX(-3vw);
            }

            .left {
                font-size: $sign-font-size ;
                font-weight: 700;
                color: $botton-bgc;
            }

            .right {
                margin-left: 0.8vw;

                .tit {
                    font-size: $banner-title-size5;
                    font-weight: 700;
                    background-image: url('../assets/images/home-tbgc.png');
                    background-repeat: no-repeat;
                    background-position: left bottom;
                    background-size: 100% 0.4vw;
                    margin-bottom: 1vw;
                }

                .tet_box {
                    position: absolute;
                    left: 3vw;
                    bottom: 5vw;
                }

                .tet {
                    font-size: $content-title-size2;
                    color: #666;
                    line-height: 1;
                    margin-bottom: 1vw;
                    display: flex;
                    align-items: center;

                    &::before {
                        display: inline-block;
                        content: '';
                        width: 1vw;
                        height: 1vw;
                        border-radius: 50%;
                        background-color: $firm-color ;
                        margin-right: 1vw;
                    }
                }
            }
        }
    }
}

// 
.daping {
    .andTile {
        background-image: url('../assets/images/zzkf_bgc.png');
        margin: 4vw 0 4vw 0;
    }
}

// 品牌
.brand-box {
    margin: 0 auto;
    overflow: hidden;

    .andTile {
        background-image: url('../assets/images/brand-tbgc.png');
    }

    .image-bar {
        img {
            width: 100%;
        }
    }
}

// 供应链合作
.teamwork {
    .andTile {
        background-image: url('../assets/images/teamwork-tbgc.png');
        // margin: 9vw 0 6vw 0;
    }

    .img-box {
        width: 100vw !important;
        padding: 0 3vw;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        margin-bottom: 2vw;

        .image {
            width: 86vw;
            height: 60vw;
            background-color: #999;
            border-radius: 2vw;
            flex-shrink: 0;
            margin: 0 2vw;
            transition: all 1s;

            &:nth-child(1) {
                background-image: url('../assets/images/teamwork-bgc1.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            &:nth-child(2) {
                background-image: url('../assets/images/teamwork-bgc2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            &:nth-child(3) {
                background-image: url('../assets/images/teamwork-bgc3.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            &:nth-child(4) {
                background-image: url('../assets/images/teamwork-bgc4.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            &:nth-child(5) {
                background-image: url('../assets/images/teamwork-bgc5.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .botm {
                width: 100%;
                height: 100%;
                background-color: rgba($color: $firm-color, $alpha: 0.3);
                color: #fff;
                display: flex;
                flex-direction: column;
                padding: 4vw;
                align-items: start;
                position: relative;

                h5 {
                    display: block;
                    width: 100%;
                    margin-bottom: 1.5vw;
                    text-align: center;

                    b {
                        font-size: $banner-title-size2;
                        background-image: url('../assets/images/home-tbgc.png');
                        background-repeat: no-repeat;
                        background-position: center bottom;
                        background-size: 100% 1.5vw;
                        font-weight: 600;
                    }
                }

                p {
                    font-size: $content-title-size;
                    margin-bottom: 0.2vw;
                }

                span {
                    position: absolute;
                    width: 20vw;
                    height: 6vw;
                    font-size: $content-title-size;
                    color: #fff;
                    background-color: $botton-bgc;
                    border-radius: 2vw;
                    text-align: center;
                    line-height: 6vw;
                    bottom: 4vw;
                    left: 33%;
                }
            }
        }
    }
}
</style>